import type {SysUserData, SysUserAdd} from "@/pages/system/user/type";
import type {ReactNode} from "react";
import type {UseFetchDataAction} from "@ant-design/pro-table/es/typing";
import type {SelectProps} from "antd";
import {Button, Select, Space, Tag,} from "antd";
import type {ProColumns} from "@ant-design/pro-table";
import type {OptionActions} from "@/type/type";
import AddSysUser from "@/pages/system/user/list/components/AddSysUser";
import {sysRolePageList} from "@/services/system/role/api";
import {SysRoleParams} from "@/pages/system/role/type";
import DebounceSelect from "@/components/CProForm/components/DebounceSelect";
import AuthWrapper from "@/components/AuthWrapper";


const roleFetchOptions = async () => {
  const data: SysRoleParams = {
    pageNum: -1,
    pageSize: -1,
    status: true,
  }
  return sysRolePageList(data).then(res => {
    return res.data.records.map(item => {
      return {
        label: <Tag color={item.color} bordered={false}>{item.roleName}</Tag>,
        value: item.id
      }
    })
  })
}


// @ts-ignore
const columns: ProColumns<SysUserData> = (optionAction: OptionActions<SysUserAdd, SysUserData>, userStatusList: SelectProps["options"], roleList: SelectProps["options"],
                                          setCreateTime: any) => {
  return [
    {
      dataIndex: "index",
      valueType: "index",
    },
    {
      title: "昵称",
      dataIndex: "nickName",
      align: 'center',
    },
    {
      title: "真实姓名",
      dataIndex: "realName",
      align: 'center',
      hideInSearch: true,
    },
    {
      title: "手机号",
      dataIndex: "phone",
      align: 'center',
      hideInSearch: true,
    },
    {
      title: "邮箱",
      dataIndex: "email",
      align: 'center',
      hideInSearch: true,
    },
    {
      title: "头像",
      dataIndex: "avatar",
      align: 'center',
      hideInSearch: true,
    },
    {
      title: "用户角色",
      dataIndex: "role",
      align: 'center',
      valueType: "select",
      width: 120,
      render: (text: ReactNode, record: SysUserData, index: number, action: UseFetchDataAction<SysUserData>) => {
        return (
          <DebounceSelect defaultValue={record.roleId} bordered={false}
                          fetchOptions={roleFetchOptions}
                          onSelect={(value, option) => {
                            optionAction.edit({...record, roleId: value.value})
                          }}
                          options={roleList}
          ></DebounceSelect>
        )
      },
      renderFormItem: () => {
        return (
          <DebounceSelect
                          fetchOptions={roleFetchOptions}
                          options={roleList}
          ></DebounceSelect>
        )
      },
    },
    {
      title: "用户状态",
      dataIndex: "status",
      align: 'center',
      valueType: "select",
      renderFormItem: () => {
        return (
          <Select options={userStatusList}
          ></Select>
        )
      },
      render: (text: ReactNode, record: SysUserData, index: number, action: UseFetchDataAction<SysUserData>) => {
        return (
          <Select defaultValue={record.status} bordered={false} options={userStatusList}
                  onSelect={(value, option) => {
                    optionAction.edit({...record, status: value})
                  }}

          ></Select>
        )
      },
    },
    {
      title: "操作",
      valueType: 'option',
      align: "center",
      key: "option",
      width: "200px",
      render: (text: ReactNode, record: SysUserData, index: number, action: UseFetchDataAction<SysUserData>) => {
        return (
          <Space>
            <AuthWrapper authorize={"sys:user:edit"}>
              {(authorized: boolean) => <AddSysUser
                initialValues={record} {...optionAction.editModal(record, authorized)}/>}
            </AuthWrapper>
            <AuthWrapper authorize={"sys:user:delete"}>
              {(authorized: boolean) => <Button disabled={!authorized} type="link" danger
                                                onClick={() => optionAction.remove([record.id])}>删除</Button>}
            </AuthWrapper>
          </Space>
        )
      }
    }
  ]


}


export default columns;
